<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <title>天气数据分析可视化</title>
    <meta content="Responsive admin theme build on top of Bootstrap 4" name="description">

    <link href="/static/static/css/bootstrap-datepicker.min.css" rel="stylesheet">

    <!-- Morris Chart CSS -->
    <link href="/static/static/css/swiper-bundle.min.css" rel="stylesheet" type="text/css">
    <link href="/static/static/css/bootstrap-datepicker.min.css" rel="stylesheet">

    <!-- DataTables -->
    <link href="/static/static/css/dataTables.bootstrap4.min.css" rel="stylesheet" type="text/css">
    <link href="/static/static/css/buttons.bootstrap4.min.css" rel="stylesheet" type="text/css">

    <!-- Responsive datatable examples -->
    <link href="/static/static/css/responsive.bootstrap4.min.css" rel="stylesheet" type="text/css">

    <link href="/static/static/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="/static/static/css/metismenu.min.css" rel="stylesheet" type="text/css">
    <link href="/static/static/css/icons.css" rel="stylesheet" type="text/css">
    <link href="/static/static/css/style.css" rel="stylesheet" type="text/css">

    <!-- ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
</head>

<body>

<div class="header-bg">
    <!-- Navigation Bar -->
    <header id="topnav">
        <div class="topbar-main" style="background-color: #1D84DE">
            <div class="container-fluid">
                <!-- Logo -->
                <div>
                    <a href="" class="logo" style="display: flex;margin-top: 10px">
                        <img src="../static/static/weathericon/方块.png"
                             style="width: 40px; height: 40px;margin-top: 5px;margin-right: 5px">
                        <h3 style="color: white">天气数据分析可视化</h3>
                    </a>
                </div>

                <div class="menu-extras topbar-custom navbar p-0">
                    <!-- Search input -->
                    <div class="search-wrap" id="search-wrap">
                        <div class="search-bar">
                            <input class="search-input" type="search" placeholder="Search">
                            <a href="#" class="close-search toggle-search" data-target="#search-wrap">
                                <i class="mdi mdi-close-circle"></i>
                            </a>
                        </div>
                    </div>

                    <ul class="navbar-right ml-auto list-inline float-right mb-0">
                        <!-- Other navigation links -->
                        <li class="dropdown notification-list list-inline-item d-none d-md-inline-block">
                            <a class="nav-link waves-effect" href="#" id="btn-fullscreen">
                                <i class="fas fa-expand noti-icon" style="color: white"></i>
                            </a>
                        </li>
                        <li class="dropdown notification-list list-inline-item d-none d-md-inline-block">
                            <a class="nav-link waves-effect" href="#" id="btn-fullscreen">
                                <h5 style="color: #fff">
                                    {{ userInfo.username }}
                                </h5>
                            </a>
                        </li>
                        <li class="dropdown notification-list list-inline-item">
                            <!-- User profile dropdown -->
                            <div class="dropdown notification-list nav-pro-img">
                                <a class="dropdown-toggle nav-link arrow-none waves-effect nav-user"
                                   data-toggle="dropdown" href="#" role="button" aria-haspopup="false"
                                   aria-expanded="false">
                                    <img src="/static/static/picture/user-1.jpg" alt="user" class="rounded-circle">
                                </a>
                                <div class="dropdown-menu dropdown-menu-right dropdown-menu-animated profile-dropdown">

                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item " href="/userApp/logOut"><i
                                            class="mdi mdi-power"></i> 退出登录</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item " href="/userApp/userinfo"><i
                                            class="ion-ios-add-circle-outline"></i> 个人信息</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="/userApp/pwdchange"><i
                                            class="ion-ios-trophy"></i> 密码修改</a>
                                </div>
                            </div>
                        </li>
                        <li class="menu-item dropdown notification-list list-inline-item">
                            <!-- Mobile menu toggle -->
                        </li>
                    </ul>
                </div>

                <div class="clearfix"></div>
            </div>
        </div>

        <!-- MENU Start -->
        <div class="navbar-custom">
            <div class="container-fluid">

                <div id="navigation">

                    <!-- Navigation Menu-->
                    <ul class="navigation-menu">

                        <li class="has-submenu">
                            <a href="/userApp/index"><i class="dripicons-home"></i> 首页</a>
                        </li>
                        <li class="has-submenu">
                            <a href="#"><i class="dripicons-view-thumb"></i> 城市数据分析</a>
                            <ul class="submenu">
                                <li><a href="/userApp/CityData">年度分析</a></li>
                                <li><a href="/userApp/CityMonth">月份分析</a></li>
                            </ul>

                        </li>


                        <li class="has-submenu">
                            <a href="#"><i class="dripicons-view-list"></i> 全国数据分析</a>
                            <ul class="submenu">
                                <li><a href="/userApp/monthTempChar">月温度分析</a></li>
                                <li><a href="/userApp/monthAirCha">月份空气质量</a></li>

                            </ul>

                        </li>
                        <li class="has-submenu">
                            <a href="/userApp/screen?user=true"><i class="dripicons-map"></i> 历史数据大屏</a>
                        </li>

                        <li class="has-submenu">
                            <a href="/userApp/chatAI"><i class="dripicons-network-2"></i> 智能问答</a>
                        </li>

                        <li class="has-submenu">
                            <a href="/userApp/weather_deatil_view"><i class="dripicons-view-thumb"></i> 详情信息</a>

                        </li>


                        <li class="has-submenu">
                            <a href="/userApp/weatherforecast/"><i class=" dripicons-star"></i>天气预测</a>
                        </li>
                    </ul>
                    <!-- End navigation menu -->
                </div>
                <!-- end #navigation -->
            </div>
            <!-- end container -->
        </div>
    </header>
</div>

<div class="wrapper" style="padding-top: 30px">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">

                        <div class="form-group row">
                            <label for="" class="col-sm-1 col-form-label">城市选择:</label>
                            <div class="col-sm-5">
                                <input
                                        list="cityList"
                                        class="form-control"
                                        id="cityInput"
                                        placeholder="请输入或选择城市"
                                >
                                <datalist id="cityList">
                                    {% for city in cityList %}
                                        <option value="{{ city }}">{{ city }}</option>
                                    {% endfor %}
                                </datalist>
                            </div>
                            <label class="col-sm-1 col-form-label">年份选择:</label>
                            <div class="col-sm-2">
                                <select id="year_select" class="form-control" onchange="loadMonths()">
                                    {% for year in unique_years %}  <!-- 需要在视图中传递unique_years -->
                                        <option value="{{ year }}">{{ year }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-sm-2">
                                <button class="btn btn-primary" onclick="searchData()" style="width: 100%">查询</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <h4 class="mt-0 header-title">空气质量变化趋势</h4>
                        <div id="mainFive" style="height: 600px; width: 100%"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <h4 class="mt-0 header-title">气温分析</h4>
                        <div id="mainOne" style="height: 700px; width: 100%"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-6">
                <div class="card">
                    <div class="card-body">
                        <h4 class="mt-0 header-title">天气状况统计</h4>
                        <div id="weatherChart" style="height: 500px; width: 100%"></div>
                    </div>
                </div>
            </div>
            <div class="col-6">
                <div class="card">
                    <div class="card-body">

                        <h4 class="mt-0 header-title">
                            风向统计
                        </h4>
                        <div id="windChart" style="height: 500px;width: 100%"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <h4 class="mt-0 header-title">风力统计</h4>
                        <div id="windlevelChart" style="height: 500px; width: 100%"></div>
                    </div>
                </div>
            </div>

        </div>

    </div>
</div>

<style>
    .swiper {
        width: 100%;
        height: calc(100vh - 131px);
    }

    .swiper-slide {
        height: 100%;
    }

    .wrapper {
        padding-top: 0;
    }

    body {
        padding-bottom: 0;
    }
</style>

<!-- jQuery -->
<script src="/static/static/js/jquery.min.js"></script>
<script src="/static/static/js/bootstrap.bundle.min.js"></script>
<script src="/static/static/js/jquery.slimscroll.js"></script>
<script src="/static/static/js/waves.min.js"></script>

<script src="/static/static/js/apexcharts.min.js"></script>
<script src="/static/static/js/bootstrap-datepicker.min.js"></script>

<!-- Required datatable js -->
<script src="/static/static/js/jquery.dataTables.min.js"></script>
<script src="/static/static/js/dataTables.bootstrap4.min.js"></script>
<!-- Buttons examples -->
<script src="/static/static/js/dataTables.buttons.min.js"></script>
<script src="/static/static/js/buttons.bootstrap4.min.js"></script>
<script src="/static/static/js/jszip.min.js"></script>
<script src="https://themesdesign.in/zegva/layouts/plugins/datatables/pdfmake.min.js"></script>
<script src="https://themesdesign.in/zegva/layouts/plugins/datatables/vfs_fonts.js"></script>
<script src="/static/static/js/buttons.html5.min.js"></script>
<script src="/static/static/js/buttons.print.min.js"></script>
<script src="/static/static/js/buttons.colVis.min.js"></script>
<!-- Responsive examples -->
<script src="/static/static/js/dataTables.responsive.min.js"></script>
<script src="/static/static/js/responsive.bootstrap4.min.js"></script>

<script src="/static/static/js/datatables.init.js"></script>
<script src="/static/static/js/app.js"></script>

<script>
    {#const defaultCity = "{{ cityList.0 }}";#}
    const defaultCity = "重庆";
    const defaultyYear='2024';
    let currentCity = defaultCity;
    let currentYear= defaultyYear;
    let autoScrollInterval = null; // 存储定时器实例
    let isPaused = false; // 滚动暂停标志
    async function searchData() {
        const selectedCity = document.getElementById('cityInput').value;
        if (!selectedCity) {
            alert('请先选择城市');
            return;
        }
        const selectedYear=document.getElementById('year_select').value;
        currentCity = selectedCity;
        currentYear= selectedYear;
        await fetchData(selectedCity,selectedYear);
    }

    const chartOne = echarts.init(document.getElementById('mainOne'));
    const windChart = echarts.init(document.getElementById('windChart'));
    const weatherChart = echarts.init(document.getElementById('weatherChart'));
    const windlevelChart = echarts.init(document.getElementById('windlevelChart'));
    const airChart = echarts.init(document.getElementById('mainFive'));

    fetchData(defaultCity,defaultyYear);

    async function fetchData(selectedCity,selectedYear) {
        if (!selectedCity||!selectedYear) return;


        try {
            // 显示加载状态
            chartOne.showLoading();
            windChart.showLoading();
            weatherChart.showLoading();
            windlevelChart.showLoading();
            airChart.showLoading();

            const response = await fetch(`/userApp/get_city_data?city=${selectedCity}&date=${selectedYear}`);
            const data = await response.json();

            // 隐藏加载状态
            chartOne.hideLoading();
            windChart.hideLoading();
            weatherChart.hideLoading();
            windlevelChart.hideLoading();
            airChart.hideLoading();

            stopAutoScroll(); // 数据更新前停止旧滚动
            updateCharts(data, selectedCity,selectedYear);
            startAutoScroll(); // 数据更新后启动新滚动
        } catch (error) {
            console.error("Error fetching data:", error);
            // 隐藏加载状态
            chartOne.hideLoading();
            windChart.hideLoading();
            weatherChart.hideLoading();
            windlevelChart.hideLoading();
            airChart.hideLoading();
        }
    }

    function change() {
        const selectedCity = document.getElementById('cityInput').value;
        const selectedYear=document.getElementById('year_select').value;
        currentCity = selectedCity;
        currentYear=selectedYear
        fetchData(selectedCity,selectedYear);
    }

    function startAutoScroll() {
        stopAutoScroll(); // 确保只有一个定时器运行

        const dataZoomOption = chartOne.getOption().dataZoom[0];
        const dataLength = chartOne.getOption().xAxis[0].data.length;

        // 自动滚动逻辑（优化版）
        autoScrollInterval = setInterval(() => {
            if (isPaused) return;

            const currentOption = chartOne.getOption();
            const startValue = currentOption.dataZoom[0].startValue;
            const visiblePoints = 36; // 每次显示30个数据点

            // 计算新的起始位置
            let newStart = startValue + 1;
            if (newStart >= dataLength - visiblePoints) {
                newStart = 0; // 滚动到末尾后回到开头
            }

            chartOne.dispatchAction({
                type: 'dataZoom',
                startValue: newStart,
                endValue: newStart + visiblePoints,
                dataZoomIndex: 0
            });
        }, 1000); // 滚动间隔改为1秒
    }

    function stopAutoScroll() {
        if (autoScrollInterval) {
            clearInterval(autoScrollInterval);
            autoScrollInterval = null;
        }
    }

    // 鼠标交互事件（优化版）
    chartOne.getZr().on('mouseover', () => {
        isPaused = true;
        stopAutoScroll();
    });

    chartOne.getZr().on('mouseout', () => {
        isPaused = false;
        startAutoScroll();
    });

    // 初始化时启动滚动
    window.addEventListener('load', () => {
        fetchData(defaultCity,defaultyYear).then(() => {
            startAutoScroll();
        });
    });

    function updateCharts(data, selectedCity,selectedYear) {
        // 更新折线图
        const optionOne = {
            title: {
                text: selectedCity + '温度变化趋势',
                left: '50%'
            },
            tooltip: {
                trigger: 'axis'
            },
            grid: {
                left: '5%',
                right: '5%',
                bottom: '10%',
                containLabel: true
            },
            toolbox: {
                right: 10,
                feature: {
                    dataView: {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar']},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            visualMap: {
                top: 50,
                right: 10,
                pieces: [
                    {
                        gt: -30,
                        lte: -10,
                        color: '#93CE07'
                    },
                    {
                        gt: -10,
                        lte: 0,
                        color: '#FBDB0F'
                    },
                    {
                        gt: 0,
                        lte: 10,
                        color: '#FC7D02'
                    },
                    {
                        gt: 10,
                        lte: 20,
                        color: '#FD0100'
                    },
                    {
                        gt: 20,
                        lte: 35,
                        color: '#AA069F'
                    },
                    {
                        gt: 35,
                        color: '#AC3B2A'
                    }
                ],
                outOfRange: {
                    color: '#999'
                }
            },
            {#dataZoom: [{#}
            {#    startValue: data.xData.length > 0 ? data.xData[0] : ''#}
            {# }, {#}
            {#    type: 'inside'#}
            {# }],#}
            {##}
            dataZoom: [
                {
                    type: 'slider', // 外部滚动条
                    xAxisIndex: 0,
                    start: 0, // 初始展示的起始位置
                    end: 10, // 初始展示的结束位置
                    handleIcon: 'M10.7,11.6l-4.7,0.3c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7h15.3c0.4,0,0.7,0.3,0.7,0.7s-0.3,0.7-0.7,0.7z M10.7,11.6L10.7,11.6z',
                    handleSize: '80%',
                    handleStyle: {
                        color: '#fff',
                        shadowBlur: 3,
                        shadowColor: 'rgba(0, 0, 0, 0.6)',
                        shadowOffsetX: 2,
                        shadowOffsetY: 2
                    },
                    textStyle: {
                        color: '#333'
                    }
                },
                {
                    type: 'inside', // 内置滚动条
                    xAxisIndex: 0,
                    start: 0,
                    end: 10
                }
            ],
            xAxis: {
                type: 'category',
                data: data.xData,
                boundaryGap: false
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    formatter: '{value} °C'
                }
            },
            series: [
                {
                    name: '最高温度',
                    type: 'line',
                    data: data.y1Data,
                    smooth: true,
                    markLine: {
                        silent: true,
                        lineStyle: {
                            color: '#333'
                        },
                        data: [
                            {
                                yAxis: -30
                            },
                            {
                                yAxis: -10
                            },
                            {
                                yAxis: 0
                            },
                            {
                                yAxis: 100
                            },
                            {
                                yAxis: 20
                            }
                        ]
                    }
                },
                {
                    name: '最低温度',
                    type: 'line',
                    data: data.y2Data,
                    smooth: true,
                    markLine: {
                        lineStyle: {
                            color: '#333'
                        },
                        data: []
                    }
                }
            ]
        }

        chartOne.setOption(optionOne);
        // 启动自动滚动
        startAutoScroll();
        // 更新饼图
        const optionTwo = {
            title: {
                text: selectedCity + '风向统计',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                type: 'scroll',
                orient: 'vertical',
                right: 10,
                top: 20,
                bottom: 20,
                data: data.windList.map(item => item.name)
            },
            series: [
                {
                    name: '风向',
                    type: 'pie',
                    radius: '55%',
                    center: ['40%', '50%'],
                    data: data.windList,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        windChart.setOption(optionTwo);
        const optionThree = {
            title: {
                text: selectedCity + '天气状况统计',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                type: 'scroll',
                orient: 'vertical',
                right: 10,
                top: 20,
                bottom: 20,
                data: data.wetaherList.map(item => item.name)
            },
            series: [
                {
                    name: '天气状况',
                    type: 'pie',
                    radius: '55%',
                    center: ['40%', '50%'],
                    data: data.wetaherList,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        weatherChart.setOption(optionThree);
        const optionFour = {
            title: {
                text: selectedCity + '风力等级统计',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            toolbox: {
                show: true,
                feature: {
                    mark: {show: true},
                    dataView: {show: true, readOnly: false},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            legend: {
                type: 'scroll',
                orient: 'vertical',
                right: 10,
                top: 20,
                bottom: 20,
                data: data.levelList.map(item => item.name)
            },
            series: [
                {
                    name: '风力等级',
                    type: 'pie',
                    radius: '55%',
                    center: ['40%', '50%'],
                    data: data.levelList,
                    roseType: 'area',
                    itemStyle: {
                        borderRadius: 8
                    },
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        windlevelChart.setOption(optionFour);

        const optionFive = {
            title: {
                text: selectedCity + '空气质量变化趋势',
                left: 'center'
            },
            tooltip: {
                trigger: 'axis',
                order: 'valueDesc'
            },
            legend: {
                data: ['空气质量良好度', '空气质量恶劣度'],
                top: 30
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: data.xCityData,

            },
            yAxis: {
                type: 'value',
                name: '空气质量指数'
            },
            series: [
                {
                    name: '空气质量良好度',
                    type: 'line',
                    showSymbol: false,
                    smooth: true,
                    animationDuration: 2000,
                    lineStyle: {
                        width: 2,
                        color: '#5470C6'
                    },
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: '#5470C680' // 带透明度的颜色
                            }, {
                                offset: 1, color: '#5470C600'
                            }]
                        }
                    },
                    data: data.y1CityData
                },
                {
                    name: '空气质量恶劣度',
                    type: 'line',
                    showSymbol: false,
                    smooth: true,
                    animationDuration: 2000,
                    lineStyle: {
                        width: 2,
                        color: '#EE6666'
                    },
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: '#EE666680'
                            }, {
                                offset: 1, color: '#EE666600'
                            }]
                        }
                    },
                    data: data.y2CityData
                }
            ],
            dataZoom: [{
                type: 'slider',
                start: 0,
                end: 100,
                height: 20,
                bottom: 10
            }]
        };

        airChart.setOption(optionFive);
    }

</script>
</body>

</html>